<template>
	<div class="login-view">
		<!-- 新增多个装饰小球（1-6个，颜色不同） -->
		<div class="decoration decoration-1"></div>
		<div class="decoration decoration-2"></div>
		<div class="decoration decoration-3"></div>
		<div class="decoration decoration-4"></div>
		<div class="decoration decoration-5"></div>
		<div class="decoration decoration-6"></div>
		<div class="content">
			<el-form class="form" :model="loginForm" status-icon :rules="rules" ref="loginForm"
				@keyup.enter.native="submitForm('loginForm')">
				<div class="title">
					<img class="logo" src="../../public/logo.png" />
					<div>✨福Star-IM✨</div>
				</div>
				<el-form-item prop="terminal" v-show="false">
					<el-input type="terminal" v-model="loginForm.terminal" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="userName">
					<el-input type="userName" v-model="loginForm.userName" autocomplete="off" placeholder="用户名"
						prefix-icon="el-icon-user"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="密码"
						prefix-icon="el-icon-lock"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" class="primary-red" @click="submitForm('loginForm')">登录</el-button>
					<el-button @click="resetForm('loginForm')">清空</el-button>
				</el-form-item>
				<div class="register">
					<router-link to="/register" class="register-link">没有账号,前往注册</router-link>
				</div>
			</el-form>
		</div>
		<!-- <icp></icp> -->
	</div>
</template>

<script>
import Icp from '../components/common/Icp.vue'
export default {
	name: "login",
	components: {
		Icp
	},
	data() {
		var checkUsername = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('请输入用户名'));
			}
			callback();
		};
		var checkPassword = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			}
			callback();
		};
		return {
			loginForm: {
				terminal: this.$enums.TERMINAL_TYPE.WEB,
				userName: '',
				password: ''
			},
			rules: {
				userName: [{ validator: checkUsername, trigger: 'blur' }],
				password: [{ validator: checkPassword, trigger: 'blur' }]
			}
		};
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.$http({
						url: "/login",
						method: 'post',
						data: this.loginForm
					}).then((data) => {
						this.setCookie('username', this.loginForm.userName);
						this.setCookie('password', this.loginForm.password);
						sessionStorage.setItem("accessToken", data.accessToken);
						sessionStorage.setItem("refreshToken", data.refreshToken);
						this.$message.success("登录成功");
						this.$router.push("/home/chat");
					});
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		getCookie(name) {
			let reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
			let arr = document.cookie.match(reg);
			if (arr) return unescape(arr[2]);
			return '';
		},
		setCookie(name, value) {
			document.cookie = name + "=" + escape(value);
		}
	},
	mounted() {
		this.loginForm.userName = this.getCookie("username");
		this.loginForm.password = this.getCookie("password");
	}
}
</script>

<style scoped lang="scss">
// 定义主题色+装饰球多彩色值
$red-deep-main: #c9182c;
$red-deep-dark: #9a0e1e;
$red-deep-light: #f8d0d5;
$white: #ffffff;
// 多彩装饰球颜色
$color-pink: #ff6b8b;
$color-orange: #ff9500;
$color-yellow: #ffd633;
$color-blue: #4dc3ff;
$color-purple: #b366ff;
$color-green: #4dffb8;

.login-view {
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;

	// 背景图片（带透明度）
	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url('../../public/login-bk.png') center center no-repeat;
		background-size: cover;
		opacity: 0.3;
		z-index: -1;
	}

	/* 装饰小球公共样式（所有球共享） */
	.decoration {
		position: absolute;
		border-radius: 50%;
		opacity: 0.7; // 统一透明度，避免刺眼
		filter: blur(1px); // 轻微模糊，颜色更柔和
	}

	/* 1号球：粉色系 */
	.decoration-1 {
		width: 450px;
		height: 450px;
		background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), $color-pink 80%);
		top: -250px;
		right: -100px;
		animation: float 16s infinite ease-in-out;
	}

	/* 2号球：橙色系 */
	.decoration-2 {
		width: 400px;
		height: 400px;
		background: linear-gradient(135deg, $color-orange 30%, rgba(255, 255, 255, 0.2));
		bottom: -200px;
		left: -100px;
		animation: float 12s infinite ease-in-out 1s; // 延迟1s，避免同步
	}

	/* 3号球：红色系（呼应主题） */
	.decoration-3 {
		width: 300px;
		height: 300px;
		background: linear-gradient(45deg, $red-deep-main 30%, $red-deep-light 100%);
		top: 50%;
		right: 50px;
		transform: translateY(-50%);
		animation: float 8s infinite ease-in-out 0.5s;
	}

	/* 4号球：黄色系 */
	.decoration-4 {
		width: 250px;
		height: 250px;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), $color-yellow 70%);
		top: 20%;
		left: 100px;
		animation: float 18s infinite ease-in-out 2s;
	}

	/* 5号球：蓝色系 */
	.decoration-5 {
		width: 220px;
		height: 220px;
		background: linear-gradient(45deg, $color-blue 40%, rgba(255, 255, 255, 0.3));
		bottom: 15%;
		right: 200px;
		animation: float 14s infinite ease-in-out 1.5s;
	}

	/* 6号球：紫色系 */
	.decoration-6 {
		width: 180px;
		height: 180px;
		background: linear-gradient(135deg, $color-purple 30%, rgba(255, 255, 255, 0.2));
		top: 70%;
		left: 300px;
		animation: float 10s infinite ease-in-out 0.8s;
	}

	/* 浮动动画：保持原有逻辑，通过延迟实现错落感 */
	@keyframes float {
		0%, 100% { transform: translateY(0) translateX(0); }
		25% { transform: translateY(-60px) translateX(30px); }
		50% { transform: translateY(30px) translateX(-45px); }
		75% { transform: translateY(-30px) translateX(-30px); }
	}

	.content {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		padding: 20px;

		.form {
			width: 380px;
			max-width: 100%;
			height: auto;
			padding: 40px 30px;
			box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
			background: rgba(255, 255, 255, 0.55);
			backdrop-filter: blur(8px);
			-webkit-backdrop-filter: blur(8px);
			border-radius: 12px;
			overflow: hidden;

			.title {
				display: flex;
				justify-content: center;
				align-items: center;
				line-height: 60px;
				margin: 20px 0 50px 0;
				font-size: 28px;
				font-weight: 700;
				letter-spacing: 3px;
				text-transform: uppercase;
				text-align: center;
				color: $red-deep-main;

				.logo {
					width: 70px;
					height: 70px;
					margin-right: 15px;
				}
			}

			::v-deep .el-input__inner {
				font-size: 16px;
				height: 48px;
				border-radius: 8px;
			}
			::v-deep .el-input::placeholder {
				font-size: 16px;
				color: #999;
			}

			::v-deep .el-input__icon {
				color: $red-deep-main;
				font-size: 20px;
			}

			::v-deep .el-button {
				font-size: 16px;
				padding: 12px 24px;
				border-radius: 8px;
			}
			::v-deep .el-button.primary-red {
				background-color: $red-deep-main;
				border-color: $red-deep-main;
				&:hover, &:focus {
					background-color: $red-deep-dark;
					border-color: $red-deep-dark;
				}
			}
			::v-deep .el-button:not(.primary-red) {
				color: $red-deep-main;
				border-color: $red-deep-light;
				&:hover {
					background-color: $red-deep-light;
				}
			}

			.register {
				display: flex;
				flex-direction: row-reverse;
				line-height: 50px;
				text-align: left;
				padding-left: 20px;

				.register-link {
					font-size: 15px;
					color: $red-deep-main;
					font-weight: 500;
					&:hover {
						color: $red-deep-dark;
						text-decoration: underline;
					}
				}
			}
		}
	}
}

// 小屏幕适配：缩小装饰球，避免拥挤
@media (max-width: 576px) {
	.login-view {
		.decoration-1 { width: 300px; height: 300px; }
		.decoration-2 { width: 250px; height: 250px; }
		.decoration-3 { width: 200px; height: 200px; }
		.decoration-4 { width: 150px; height: 150px; }
		.decoration-5 { width: 120px; height: 120px; }
		.decoration-6 { width: 100px; height: 100px; }
	}

	.form {
		padding: 30px 20px !important;
		.title {
			font-size: 24px !important;
			margin: 10px 0 30px 0 !important;
			.logo { width: 60px; height: 60px; }
		}
		::v-deep .el-input__inner {
			font-size: 15px !important;
			height: 44px !important;
		}
		::v-deep .el-button {
			font-size: 15px !important;
			padding: 10px 20px !important;
		}
		.register-link {
			font-size: 14px !important;
		}
	}
}
</style>